<template>
    <div>
 <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>赛事管理</el-breadcrumb-item>
      <el-breadcrumb-item>赛事报名</el-breadcrumb-item>
    </el-breadcrumb>

<el-card>
  <el-table
    :data="matchData"
    style="width: 100%"
    >
    <el-table-column
      prop="name"
      label="赛事名称"
      width="180">
    </el-table-column>
    <el-table-column
      prop="startime"
      label="开始日期"
      width="180">
    </el-table-column>
      <el-table-column
      prop="endtime"
      label="结束日期"
      width="180">
    </el-table-column>
    <el-table-column
      prop="address"
      label="地址">
    </el-table-column>
    <el-table-column label="操作">
        <template slot-scope="scope">
              <el-button @click="getEventOnMatchByMatchId(scope.row.id)">报名</el-button>
              
             
            <el-button >查看我的报名单</el-button>
            
               </template>

    </el-table-column>
  </el-table>

</el-card>
 <el-dialog title="选择项目报名" :visible.sync="joinMatchEventsDialogVisible" width="50%">
  <el-table
      :data="eventsTableData"
      style="width: 100%">

       <el-table-column
        prop="matchName"
        label="项目名称"
        width="180">
      </el-table-column>
       <el-table-column
        prop="eventStartTime"
        label="开始时间"
        width="180">
      </el-table-column>
       <el-table-column
        prop="eventEndTime"
        label="结束时间"
        width="180">
      </el-table-column>
       <el-table-column
        
        label="报名"
        width="180">
        <template slot-scope="scope">
        <el-button @click.native="addJoinTeamDialogVisible=true">报名</el-button>

        </template>
      </el-table-column>

  </el-table>
 
 </el-dialog>
  <el-dialog title="赛事报名" :visible.sync="addJoinTeamDialogVisible" width="50%">
    <el-transfer
    v-model="value"
    :titles="['具备条件人员', '报名人员']"
    :props="{
      key: 'value',
      label: 'desc'
    }"
    :data="data">
  </el-transfer>
   </el-dialog>
 
    </div>
</template>
<style lang="less" scoped>

</style>
<script>
export default {
    data(){
      const generateData = _ => {
        const data = [];
       
        return data;
      };
        return{
matchData:[],
joinMatchEventsDialogVisible:false,
addJoinTeamDialogVisible:false,
matchrecode:'',
eventsTableData:[],

 data: generateData(),
        value: []
 
        }
    },
    created(){
        this.getmatch()
    },
    methods:{
        //获取所有的赛事
   async getmatch() {
      const { data: res } = await this.$http.get("asfc-match/getMatch");
      if (res.code !== 200) {
        this.$message.error("获取失败！");
      }
      this.matchData = res.data;
      
    },
    //获取该比赛所支持的项目
 async getEventOnMatchByMatchId(id){
      this.matchrecode=id
     

const { data: res } = await this.$http.put(`event-on-match/getEventOnMatchByMatchId?id=${id}`
);
this.matchrecode=id
 if (res.code !== 200) {
        this.$message.error("获取用户列表失败！");
      } 

this.eventsTableData=res.data
 this.joinMatchEventsDialogVisible=true;
    }
    }
}
</script>